import React, { Component } from 'react';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faMarkdown, faMastodon } from '@fortawesome/free-brands-svg-icons';
import './Mark.less';

export interface Mark {
    props: any,
    state: any,
	bodyDom: any,
	handleScroll: () => void
}

export class Mark extends Component {
	constructor(props) {
		super(props);
		this.state = {
			upFloat: true
		}
	}

	componentDidMount(): void {
		// 模拟请求接口成功，不想写接口
		let timeOut = setTimeout(() => {
			clearTimeout(timeOut)
			this.setState({
				upFloat: false
			})
		}, 1000);
	}

	clickMark = () => {
		this.setState({
			upFloat: true,
		}, () => {
			let timeOut = setTimeout(() => {
				clearTimeout(timeOut);
				this.setState({ upFloat: false })
			}, 800);
		})
	}

	render() {
		let { upFloat } = this.state;
		return (
			<div className="Mark">
				<div className="Mark_hr" />
				<div
					className="Mark_icon"
					style={{ marginTop: upFloat ? '-32px' : '-14px' }}
					onClick={this.clickMark}
				>
					<span className="iconfont icon-bookmark"/>
				</div>
			</div>
		)
	}
}

export default Mark;